<script setup>
import { letterGetListService } from '@/api/letter'
import to from '@/assets/letter/to.png'
import { Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import {
  daysDifferenceFromNow,
  disableBlackTheme,
  formattedDataByLetterInfo
} from '../utils/tool'
import { useRouter } from 'vue-router'
import { getRandomElement } from '@/utils/array'
disableBlackTheme()
// 获取数据
const letters = ref([])
const getList = async () => {
  const res = await letterGetListService()
  letters.value = formattedDataByLetterInfo(res.data.data)
}
getList()

// 获取*号
const getRandomStars = () => {
  // 生成一个100到500之间的随机数（包括100和500）
  //   const numStars = Math.floor(Math.random() * (1001 - 50 + 1)) + 50
  const numStars = 500

  // 创建一个包含指定数量星号的字符串
  const stars = '*'.repeat(numStars)

  return stars
}

// 看自己已经发送信件
const router = useRouter()
const goLetter = (item) => {
  // 表示是暂未发送的信件
  if (item.content == null) {
    return
  }
  router.push('/letter/showcur?id=' + item.id)
}

// 金句列表
let sentence = ''
const sentences = [
  '永远相信美好的事情即将发生.',
  '多年之后, 愿你不负所期.',
  '追光的人, 终会万丈光芒.',
  '少年不惧岁月长, 彼方尚有荣光在.',
  '向前看, 轻舟已过万重山.',
  '逢水开路，遇水架桥.',
  ''
]
const getSentence = () => {
  let tmp = getRandomElement(sentences)
  while (tmp == sentence) {
    tmp = getRandomElement(sentences)
  }
  sentence = tmp
  return tmp
}
</script>

<template>
  <h2>信件列表：</h2>
  <div
    style="width: 100%; position: relative; margin-bottom: 30px"
    v-for="item in letters"
    :key="item.id"
  >
    <el-card
      shadow="hover"
      style="border-radius: 20px; cursor: pointer"
      @click="goLetter(item)"
    >
      <template #header>
        <div class="card-header">
          <div style="display: flex; justify-content: space-between">
            <el-text>{{ item.writeTime.split(' ')[0] }}</el-text>
            <div style="display: flex; flex-direction: column">
              <el-text>寄 往</el-text>
              <img style="width: 60px" :src="to" alt="" />
            </div>
            <el-text>{{ item.sendTime.split(' ')[0] }}</el-text>
          </div>
        </div>
      </template>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <el-text tag="b" size="large">{{ item.title }}</el-text>
        <el-tag v-if="item.isPublic" type="primary" size="small">公开信</el-tag>
        <!-- <el-tag v-else type="info" size="small">非公开信</el-tag> -->
        <div v-else></div>
      </div>
      <null-box size="10"></null-box>
      <el-text
        tag="p"
        style="
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3; /* 设置最多显示的行数 */
          overflow: hidden;
          text-overflow: ellipsis; /* 超出部分用省略号代替 */
          line-height: 1.5; /* 根据需要调整行高 */
        "
      >
        {{ item.contentText == null ? getRandomStars() : item.contentText }}
      </el-text>
      <template #footer>
        <div style="display: flex; justify-content: space-between">
          <el-text size="small">ZLCode: {{ getSentence() }}</el-text>
          <el-text size="small">收件人：{{ item.toEmail }}</el-text>
        </div>
      </template>
    </el-card>
    <div
      v-if="item.content == null"
      style="
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1;
        border-radius: 20px;
        border: 1px #e4e7ed solid;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: not-allowed;
      "
    >
      <div>
        <div>
          <el-icon size="40" color="#aaa"><Lock /></el-icon>
        </div>
        <span
          style="font-size: 12px; color: #666"
          v-if="daysDifferenceFromNow(item.orgSendTime) > 0"
        >
          {{ daysDifferenceFromNow(item.orgSendTime) }}天后发出</span
        >
        <span v-else style="font-size: 12px; color: #666"> 即将发出</span>
      </div>
    </div>
  </div>
</template>
